<template>
	<div class="query-details">
		<div class="topBox">
			<div class="topBoxSon1">
				<p>书城管理————<b>订单详情</b></p>
				<button class=" el-icon-refresh-right" @click="refresh()"></button>
			</div>
		</div>
		<div class="searchBox">
			<div class="searchSonBox1">
				<h3 class="el-icon-s-data">后台订单管理</h3>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择" style="width: 60%;" v-model="cart.payStaus">
					<el-option v-for="(item,i) in payStaus" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-input v-model="cart.nickname" placeholder="下单人-账号" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择" style="width: 60%;" v-model="cart.shipStatus">
					<el-option v-for="(item,i) in shipStatus" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-input v-model="cart.phone" placeholder="下单人-手机号" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox1">
				<el-select placeholder="请选择" style="width: 60%;" v-model="cart.days">
					<el-option v-for="(item,i) in days" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-input v-model="cart.nickname" placeholder="下单人-姓名" style="width: 60%;"></el-input>
			</div>
			<div class="searchSonBox2">
				<el-button class="el-icon-search" style="width: 60%;color: white;background-color: #009688;"
					@click="trackOrder()">查询</el-button>
			</div>
		</div>
		<el-table :data="tableData" style="width: 90%;margin: 0 auto;">
			<el-table-column type="expand">
				<template slot-scope="props">
					<table style="width: 80%;margin: 0 auto;">
						<tr>
							<td></td>
							<td>账号:{{props.row.user.account}}</td>
							<td>电话:{{props.row.user.phone}}</td>
							<td>下单:{{props.row.user.nickname}}</td>
							<td>快递单号:{{props.row.shipno}}</td>
							<td>{{props.row.shipper}}</td>
							<td></td>
						</tr>
						<tr v-for="item in props.row.items">
							<td style="width: 10%;">
								<el-image style="width: 7vh;height: 7vh;"
									:src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`">
								</el-image>
							</td>
							<td style="width: 20%;">名称:{{item.book.name}}</td>
							<td style="width: 20%;">数量:{{item.num}}</td>
							<td style="width: 20%;">单价:{{item.price}}</td>
							<td>库存:{{item.book.stock}}</td>
						</tr>
					</table>
				</template>
			</el-table-column>
			<el-table-column label="订单号" prop="ordid">
			</el-table-column>
			<el-table-column label="收货人" prop="ship2name">
			</el-table-column>
			<el-table-column label="收货地址" prop="ship2addr">
			</el-table-column>
			<el-table-column label="电话" prop="ship2phone">
			</el-table-column>
			<el-table-column label="快递单号" prop="shipno">
			</el-table-column>
			<el-table-column label="发货时间" prop="tcreate">
				<template slot-scope="scope">
					{{scope.row.tcreate|run}}
				</template>
			</el-table-column>
			<el-table-column label="总价" prop="amount">
			</el-table-column>
			<el-table-column label="付款">
				<template slot-scope="scope">
					{{scope.row.payStatus==1?'已付':'未付'}}
				</template>
			</el-table-column>
			<el-table-column label="发货">
				<template slot-scope="scope" v-if="scope.row.payStatus == 1">
					<span>
						{{scope.row.shipStatus==1?'已发货':scope.row.shipStatus==2?'已收货':'未发货'}}
					</span>
					<span>
						<el-button v-if="scope.row.shipStatus == 0" type="text"
							@click="goDelivery(scope.row)">去发货</el-button>
					</span>
				</template>
			</el-table-column>
		</el-table>
		<div style="width: 100%; margin-top: 10px; display: flex; justify-content: center;">
			<el-button @click="go(-1)" v-show="num >1">上一页</el-button>
			<el-button @click="go(1)" v-show="tableData.length>=5">下一页</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'QueryDetails',
		data() {
			return {
				payStaus: [{
						label: '未付款',
						value: 0
					},
					{
						label: '已付款',
						value: 1
					},
				],
				shipStatus: [{
						label: '未发货',
						value: 0
					},
					{
						label: '已发货',
						value: 1
					},
					{
						label: '已签收',
						value: 2
					},
				],
				days: [{
						label: '7天内',
						value: 7
					},
					{
						label: '15天内',
						value: 15
					},
					{
						label: '30天内',
						value: 30
					},
					{
						label: '60天内',
						value: 60
					},
					{
						label: '120天内',
						value: 120
					},
				],
				tableData: [],
				cart: {
					days: '',
					payStaus: '',
					shipStatus: '',
					account: '',
					nickname: '',
					phone: ''
				},
				num: 1,
			}
		},
		filters: {
			run(value) {
				let one = new Date(value);
				let year = one.getFullYear() + "-" + (one.getMonth() + 1) + "-" + one.getDate();
				return year;
			}
		},
		methods: {
			findOrder() {
				this.$postk("/api/adm/ord/findPageOrders2u/1/5").then(
					(resp) => {
						this.tableData = resp.data.data.orders;
					})
			},
			trackOrder() {
				this.tableData = [];
				let fd = new FormData();
				console.log(this.cart)
				fd.append("days", this.cart.days);
				fd.append("payStaus", this.cart.payStaus);
				fd.append("shipStatus", this.cart.shipStatus);
				fd.append("account", this.cart.account);
				fd.append("nickname", this.cart.nickname);
				fd.append("phone", this.cart.phone);
				this.$postf(`/api/adm/ord/findPageOrders2u/1/5`, fd).then((resp) => {
					this.tableData = resp.data.data.orders;
				})
			},
			goDelivery(item) {
				let fd = new FormData();
				let day = new Date();
				let year = day.getFullYear().toString() + (day.getMonth() + 1).toString() + day.getDate().toString() + day
					.getHours().toString() + day.getMinutes().toString() + day.getSeconds().toString()
				fd.shipno = year + item.ordid.toString()
				fd.shipper = '邮政'
				this.$postk('/api/adm/ord/updateShip/' + item.ordid, fd)
					.then(function(resp) {
						console.log(resp.data)
					})
				this.findOrder()
			},
			go(i) {
				this.num = this.num + i
				var that = this;
				this.$postk('/api/adm/ord/findPageOrders2u/' + this.num + '/5')
					.then(function(resp) {
						console.log(resp.data)
						that.tableData = resp.data.data.orders;
					})
			},
		},
		mounted() {
			this.findOrder();
		}
	}
</script>

<style scoped>
	.query-details {
		width: 100%;
		height: 100%;
	}

	.topBox {
		display: flex;
		width: 90%;
		margin: 0 auto;
	}

	.topBoxSon1 {
		width: 100%;
		height: 60px;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #aaa6a6;
	}

	.topBoxSon1 p {
		line-height: 60px;
		font-size: 20px;
		color: #aaa6a6;
	}

	.topBoxSon1 p b {
		font-weight: 400;
		line-height: 60px;
		font-size: 20px;
		color: #818181;
	}

	.topBoxSon1 button {
		display: flex;
		background-color: #009688;
		color: white;
		font-size: 20px;
		border: none;
		border-radius: 5px;
		height: 40px;
		width: 55px;
		margin-top: 10px;
		align-items: center;
		text-align: center;
		padding-left: 15px;
	}

	.searchBox {
		width: 90%;
		height: 100px;
		display: flex;
		margin: 0 auto;
		margin-top: 20px;
	}

	.searchSonBox1 {
		width: 22%;
		height: 100px;
	}

	.searchSonBox2 {
		width: 12%;
		height: 100px;
	}

	.bottomBox {
		display: flex;
		width: 100%;
		height: 50px;
		background-color: #D3D3D3;
		display: flex;
		position: absolute;
		bottom: 0;
	}

	.bottomBox.p {
		margin: 20px auto;
	}

	.col4 {
		background-color: #393d49;
	}

	.but1 {
		border: none;
		background-color: white;
	}
</style>